<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="utf-8"/>
  <link href="../css/bootstrap.css" rel="stylesheet"/>
  <link href="../css/all.css" rel="stylesheet"/>
  <link href="../css/index.css" rel="stylesheet"/>
  <link href="../css/swiper-3.4.2.min.css" rel="stylesheet"/>
  <script src="../js/jquery-2.0.3.min.js"></script>
  <script src="../js/swiper-3.4.2.min.js"></script>
  <script type="text/javascript">
  function gotoUrl(url){
	  window.parent.location.href=url;
  }
  </script>
</head>
<body>
     <div class="swiper-container gallery-top">
       <div class="swiper-wrapper">
       <th:block th:each="recommended,index:${recommendedList}">
         <div class="swiper-slide" th:style="'background-image:url('+${recommended.circlepicture}+')'"
         th:onclick="'javascript:gotoUrl(\''+${recommended.realUrl}+'\')'"></div>
       </th:block>  
       </div>
       <!-- Add Arrows -->
       <div class="swiper-button-next swiper-button-white"></div>
       <div class="swiper-button-prev swiper-button-white"></div>
     </div>
     <div class="swiper-container gallery-thumbs">
       <div class="swiper-wrapper">
       <th:block th:each="recommended,index:${recommendedList}">
         <div class="swiper-slide" th:style="'background-image:url('+${recommended.circlepicture}+')'"></div>
       </th:block>
       </div>
     </div>


 
  <script type="text/javascript" src="../js/bootstrap.min.js"></script>
  <script>
    // 轮播
    var galleryTop = new Swiper('.gallery-top', {
        nextButton: '.swiper-button-next',
        prevButton: '.swiper-button-prev',
        spaceBetween: 10,
        autoplay : 1800,
    });
    var galleryThumbs = new Swiper('.gallery-thumbs', {
        spaceBetween: 10,
        centeredSlides: true,
        slidesPerView: 'auto',
        touchRatio: 0.2,
        slideToClickedSlide: true
    });
    galleryTop.params.control = galleryThumbs;
    galleryThumbs.params.control = galleryTop;
    
    // 菜单栏
    $('.navbar-nav .list-item').on('hover', function() {
      $(this).addClass('active');
    })
  </script>
</body>    
</html>    